// mouse.js
import { reactive, ref, toRefs, toValue, watch } from 'vue'

import { useEvent } from './event'

// 按照惯例，组合式函数名以“use”开头
export function useMouse(val: any) {
  // 被组合式函数封装和管理的状态
  const x = ref(0)
  const y = ref(0)

  // 组合式函数可以随时更改其状态。
  function update(event: any) {
    x.value = event.pageX
    y.value = event.pageY
  }

  const state = reactive({
    foo: 1,
    bar: '2'
  })


  watch(() => toValue(val), (nVal) => {
    console.log(nVal + x.value, 'nVal')

    state.bar = nVal + 'state.bar'
  })



  // 一个组合式函数也可以挂靠在所属组件的生命周期上
  // // 来启动和卸载副作用
  // onMounted(() => window.addEventListener('mousemove', update))
  // onUnmounted(() => window.removeEventListener('mousemove', update))

  useEvent(window, 'mousemove', update)

  // 通过返回值暴露所管理的状态
  return {
    x,
    y,
    ...toRefs(state)
  }
}